<template>
  <!--<div id="paperAnalysis">-->
    <!--&lt;!&ndash;试卷列表&ndash;&gt;-->
    <!--<div v-for="item in 5" style="position: relative;border-bottom: 1px solid #ccc;height: 50px;line-height: 50px;margin-bottom: 20px">-->
      <!--<span>垃圾分类第二卷</span>-->
      <!--<el-button type="primary" @click="toPath" style="position: absolute;right: 10px">查看</el-button>-->
    <!--</div>-->
  <!--</div>-->
  <!--考试记录-->
  <div class="examinationRecord">
    <div class="titleDiv clearFloat">
      <p class="lf">考试记录</p>
      <!--<div class="rf pageDiv">-->
        <!--&lt;!&ndash;<i class="el-icon-arrow-left lf"></i>&ndash;&gt;-->
        <!--&lt;!&ndash;<i class="el-icon-arrow-right lf"></i>&ndash;&gt;-->
       <!---->
      <!--</div>-->
      <!--分页器-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-size="6"
        layout="total, prev, pager, next"
        :total="pagination.total"
        prev-text="上一页"
        next-text="下一页"
      style="float: right;margin: 12px 30px 0 0">
      </el-pagination>
    </div>
    <div class="contentDiv">
      <div v-for="item in list" class="examinationList lf" :key="index">
        <div class="lf">
          <div class="clearFloat">
            <p class="lf">{{item.name}}</p>
            <span class="lf">总分 {{item.totalPoints}}</span>
          </div>
          <p>考试时间：{{item.usedTime}}分钟</p>
        </div>
        <div class="rf">
          <div class="clearFloat">
            <p class="lf">{{item.grade}}</p>
            <span class="lf">分</span>
          </div>
          <div class="sjfxBtn" @click="toPath(item.id)">试卷分析</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getExamListForDoor,centerqueryExamRecord} from '@/request/api'
  export default {
    name: 'paperAnalysis',
    data () {
      return {
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
        list: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
//      getList() {
//        const loading = this.openLoading();
//        var params = {
//          "_search": true,
//          "bgTm": "",
//          "createBy": 0,
//          "data": {
//            "examStatus":0,
//            startTime:'',
//            endTime:'',
//            "userId":JSON.parse(localStorage.getItem('userInfo')).id,
//            examObjCompanyType: JSON.parse(localStorage.getItem('userInfo')).userType
//          },
//          "endTm": "",
//          "keywords": "",
//          "pageNumber": this.pagination.currentPage,
//          "pageSize": 6,
//          "selected": "",
//          "selectedType": "",
//          "sortField": "",
//          "sortOrder": "",
//          "status": 0,
//          "type": "",
//          examObjCompanyType: JSON.parse(localStorage.getItem('userInfo')).userType
//        }
//        getExamListForDoor(params).then(res=> {
//          if(res.code == 200) {
//            if(res.data.records.length!=0) {
//              this.list = res.data.records
//              this.pagination.total = res.data.total
//            }else {
//              this.$message({
//                message: '暂无记录',
//                type: 'warning',
//                offset: '500'
//              });
//            }
//          }
//          loading.close();
//        }).catch(() => {
//          loading.close();
//        })
//      },
      getList() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id,
          },
          "endTm": "",
          "pageNumber": this.pagination.currentPage,
          "pageSize": 6
        }
        centerqueryExamRecord(params).then(res=> {
          if(res.code == 200) {
            if(res.data.records.length!=0) {
              this.list = res.data.records
              this.pagination.total = res.data.total
            }else {
              this.$message({
                message: '暂无记录',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.getList()
      },
      toPath(id) {
        this.$router.push({
          name:'paperAnalysisInfo',
          params: {
              id: id
          }
        })
      }
    }
  }
</script>

<style scoped>
  li {
    list-style: none
  }
  p,ul{
    margin:0;
  }
  .titleDiv{
    width:100%;
    height:60px;
    border-bottom:1px solid #E5E5E5;
  }
  .titleDiv p{
    font-size:20px;
    color:#343434;
    font-weight: bold;
    height:60px;
    line-height:60px;
    padding-left:54px;
    box-sizing: border-box;
    position: relative;
    margin-right:60px;
  }
  .titleDiv p:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 24px;
    background: #22944E;
    top: 20px;
    left: 27px
  }
  .ques-card-num img{
    width:100%;
    height:auto;
    display:block;
    border:none;
  }
  .ques-card-tag span{
    line-height: 17px;
    display: inline-block;
    max-width: 84px;
    height: 18px;
    padding: 0 6px;
    color: #fa9600;
    border: 1px solid #f5cc84;
    border-radius: 2px;
    margin: 0 4px;
  }

  .ques-section-item+.ques-section-item {
    margin-left: 20px;
  }

  .ques-card-list li{
    position: relative;
  }
  .ques-list-image img{
    border-radius: 100%;
    width:100%;
    height:auto;
    display:block;
    border:none;
  }

  .integrals-c:last-child,.ques-card-list li:last-child .ques-list-box{
    border-bottom: 0;
  }
  .integrals-c img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    vertical-align: middle;
    border-radius:50%;
  }
  .pageDiv{
    width:80px;
    height:30px;
    border:1px solid #13893E;
    border-radius:4px;
    cursor:pointer;
    margin:15px 30px 0 0 !important;
  }
  .pageDiv i{
    width:40px;
    height:30px;
    line-height:30px;
    text-align: center;
  }
  .pageDiv /deep/ .el-icon-arrow-left{
    color:#13893E;
    font-weight: bold;
    background:#fff;
    border-radius:4px 0 0 4px;
  }
  .pageDiv /deep/ .el-icon-arrow-right{
    color:#fff;
    font-weight: bold;
    background:#13893E;
    border-radius:0 4px 4px 0;
  }
  .examinationRecord{
    width: 1200px;
    height: 441px;
    background: #FFFFFF;
    margin-bottom:60px;
  }
  .examinationRecord .contentDiv{
    width:100%;
    height:calc( 100% - 60px );
    padding:20px 30px;
    box-sizing: border-box;
  }
  .examinationRecord .contentDiv .examinationList{
    width:calc( (100% - 40px)/2 );
    height:100px;
    margin-bottom:20px;
    border: 1px solid #E5E5E5;
    padding:22px 20px 0 20px;
    box-sizing: border-box;
  }
  .examinationRecord .contentDiv .examinationList:nth-child(odd){
    margin-right:40px;
  }
  .examinationRecord .contentDiv .examinationList .lf div p{
    font-size: 16px;
    color: #000000;
    line-height:24px;
  }
  .examinationRecord .contentDiv .examinationList .lf>p{
    font-size: 16px;
    color: #9A9A9A;
  }
  .examinationRecord .contentDiv .examinationList .lf span{
    width:72px;
    height: 24px;
    line-height:24px;
    background: #fff;
    border: 1px solid #22944E;
    border-radius: 4px;
    text-align:center;
    font-size: 14px;
    color: #22944E;
    margin-left:20px;
    margin-bottom:13px;
  }
  .examinationRecord .contentDiv .examinationList .rf{
    position: relative;
    top:-15px;
  }
  .examinationRecord .contentDiv .examinationList .rf p{
    font-size: 28px;
    font-weight: bold;
    color: #22944E;
    margin: 0 0 5px 8px;
  }
  .examinationRecord .contentDiv .examinationList .rf span{
    font-size: 14px;
    color: #22944E;
    margin: 13px 0 0 6px;
  }
  .sjfxBtn{
    width: 70px;
    height: 28px;
    line-height:28px;
    background: #FFFFFF;
    border: 1px solid #22944E;
    text-align:center;
    font-size: 14px;
    color: #22944E;
    cursor:pointer;
  }
</style>
